// px转换为rem
@function pxToRem($px, $base: 750px) {
    $min: 1 / $base * 10 * 1;
    $result: $px / $base * 10 * 1;

    @if $result < 0.027 and $result > 0 {
        @return 2px;
    }

    @else {
        @return $px / $base * 10 * 1rem;
    }

}
// 设置dpr下的字体大小
@mixin font-dpr($font-size, $line-height: $font-size) {
    font-size: $font-size / 2;

    [data-dpr="2"] & {
        font-size: $font-size;

    }

    [data-dpr="3"] & {
        font-size: $font-size * 3 / 2;
    }
}
@keyframes enrollBelow
{
    from {
        transform: scale(1,1);
    }
    to {
        transform: scale(1.1,1.1);
    }
}


@font-face {
    font-family: 'PingFang Regular';
    src: url('../font/enroll/PingFang Regular.eot');
    src:
      url('../font/enroll/PingFang Regular.eot?#font-spider') format('embedded-opentype'),
      url('../font/enroll/PingFang Regular.woff') format('woff'),
      url('../font/enroll/PingFang Regular.ttf') format('truetype'),
      url('../font/enroll/PingFang Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
  }
#yuko-root {
    min-height: 100%;
    background: linear-gradient(to bottom,#0dc7fd, #effbff);
    padding-bottom: pxToRem(40px);
    font-family: 'PingFang Regular';

    #yuko-header {
        padding: pxToRem(46px) pxToRem(36px) pxToRem(43px) pxToRem(36px);
        @include font-dpr(28px);

        #yuko-back {
            color: #000000;

            div {
                padding-left: pxToRem(57px);
                background: url(../images/learnPark/arrow_left.png) no-repeat left center;
                background-size: contain;
                width: fit-content;
            }
        }

        div {
            height: pxToRem(42px);
            line-height: pxToRem(42px);
        }
        
        #yuko-next {
            float: right;
            padding-right: pxToRem(57px);
            background: url(../images/learnPark/arrow_next.png) no-repeat right center;
            background-size: contain;
        }

    }

    #yuko-main {

        #yuko-videotitle {
            padding: 0 pxToRem(36px);
            p {
                @include font-dpr(48px);
            }

            span {
                @include font-dpr(32px);
            }
        }
        
        #yuko-videoplay {
            position: relative;
            margin-top: pxToRem(42px);
            height: pxToRem(522px);

            &.playing {
                #yuko-videoplay-icon {
                    z-index: -1;
                }
            }

            #yuko-videoplay-bg {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                width: 100%;
            }

            #yuko-videoplay-video {
                position: absolute;
                top: pxToRem(54px);
                left: pxToRem(76px);
                z-index: 2;
                width: pxToRem(600px);
                height: pxToRem(320px);
                border-radius: 6px;
                overflow: hidden;

                video {
                    width: 100%;
                    height: 100%;
                }
            }

            #yuko-videoplay-icon {
                position: absolute;
                width: pxToRem(102px);
                height: pxToRem(102px);
                top: pxToRem(168px);
                left: pxToRem(327px);
                z-index: 4;
            }
            .poster-img{
                width: pxToRem(600px);
                height: pxToRem(320px);
                position: absolute;
                top: pxToRem(54px);
                left: pxToRem(76px);
                z-index: 3;
            }
        }

        #yuko-videodesc {
            position: relative;
            margin: pxToRem(36px);
            line-height: pxToRem(36px);
            @include font-dpr(24px);
            display: -webkit-box;
            // -webkit-box-orient: vertical;
            // -webkit-line-clamp: 3;
            overflow: hidden;

            // &:after {
            //     position: absolute;
            //     content: "";
            //     bottom: 0;
            //     right: 0;
            //     width: 0;
            //     height: 0;
            //     border: 6px solid transparent;
            //     border-color: #000 transparent transparent transparent;
            // }

            // &.expanded {
            //     -webkit-line-clamp: 5;

            //     &:after {
            //         bottom: 6px;
            //         border-color: transparent transparent #000 transparent;
            //     }
            // }
        }

        #yuko-recordplay {
            position: relative;
            margin: pxToRem(34px);
            height: pxToRem(1030px);
            // padding: 0 pxToRem(56px);
            background: url(../images/learnPark/record_display.png) no-repeat center center;
            background-size: contain;

            #yuko-recordplay-enroll {
                display: block;
                width: pxToRem(130px);
                height: pxToRem(135px);
                position: absolute;
                top: pxToRem(10px);;
                right: pxToRem(10px);
                user-select: none;
                background: url(../images/learnPark/enroll.png);
                background-size: 100%;
                animation: enrollBelow .5s infinite alternate;
            }

            #yuko-recordplay-part1 {
                height: pxToRem(353px);
                background: url(../images/learnPark/record_display_1.png) no-repeat center center;
            }

            #yuko-recordplay-part3 {
                height: pxToRem(215px);
                margin-top: -4px;
                background: url(../images/learnPark/record_display_3.png) no-repeat center center;
            }

            #yuko-recordplay-text {
                // height: pxToRem(840px);
                margin-top: -2px;
                background: url(../images/learnPark/record_display_2.png) center center;
            }

            .yuko-recordplay-part {
                padding: 0 pxToRem(56px);
                background-size: contain !important;
            }
            
            #yuko-recordplay-en {
                line-height: pxToRem(48px);
                // padding-top: pxToRem(338px);
                margin-bottom: pxToRem(38px);
                @include font-dpr(34px);
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 6;
                overflow: hidden;
            }

            #yuko-recordplay-cn {
                line-height: pxToRem(38px);
                @include font-dpr(28px);
                // margin-bottom: pxToRem(70px);
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }

            #yuko-recordplay-opr {
                height: pxToRem(128px);    
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: pxToRem(10px);

                #yuko-recordplay-play {
                    width: pxToRem(108px);
                    height: pxToRem(108px);
                    background: url(../images/learnPark/voice_ready.png) no-repeat center center;
                    background-size: 84.375%;
                }

                #yuko-recordplay-record {
                    position: relative;
                    width: pxToRem(108px);
                    height: pxToRem(108px);
                    background: url(../images/learnPark/voice_record.png) no-repeat center center;
                    background-size: 100%;
                    .yuko-toggletip{
                        position: absolute;
                        width: pxToRem(300px);
                        height: pxToRem(100px);
                        top:pxToRem(-75px);
                        left: 50%;
                        margin-left: pxToRem(-150px);
                        .time,.word{
                            color: rgb(20, 201, 253);
                            @include font-dpr(18px);
                            text-align: center;
                        }
                    }
                }

                #yuko-recordplay-read {
                    width: pxToRem(108px);
                    height: pxToRem(108px);
                    background: url(../images/learnPark/voice_read.png) no-repeat center center;
                    background-size: 84.375%;
                }
            }
        }

        #yuko-generate {
            width: pxToRem(598px);
            height: pxToRem(110px);
            margin: pxToRem(40px) auto 0 auto;
            background: url(../images/learnPark/generate.png) no-repeat right center;
            background-size: contain;
        }
    }
}